<template>
  <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm" label-position="top">
    <el-form-item :label="`${$t('common.form.preview.sparepart.colum1')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepart&&formdata.sparepart.name" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.paas.model.sparePartField.sparePartNo')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepart&&formdata.sparepart.serialNumber" readonly></el-input>
    </el-form-item>
    <el-form-item>
        <span slot="label">
          <el-tooltip class="item" effect="dark" :content="$t('part.tips30')" placement="top-start">
            <span>{{ $t('task.detail.components.personRepertoryCount') }}<i class="el-icon-question"></i>:</span>
          </el-tooltip>
        </span>
      <el-input type="text" placeholder="" :value="applicantHoldCount" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.label.sparepartType')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepart&&formdata.sparepart.type" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.label.sparepartStandard')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepart&&formdata.sparepart.standard" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.part.explain')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepart&&formdata.sparepart.description" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.label.ralationProductType')}:`"  v-if="initData.openSuperCodePro">
      <el-input type="text" placeholder="" :value="formdata.sparepart&&getProductData(formdata.productTypeList)" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.form.preview.stock.lackStockDisplayName.warehouseName')}:`">
      <el-input type="text" placeholder="" :value="formdata.repertory&&formdata.repertory.name" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('part.field9')}:`">
      <el-input type="text" placeholder="" :value="formdata.repertoryCount" readonly></el-input>
      <el-tooltip class="item" effect="dark" :content="`${$t('part.text9')}：${formdata.safetyStock}`" placement="top">
        <el-tag size="mini" type="danger" style="float: right" class="tag-position"
                v-if="formdata.safetyStock && (formdata.safetyStock > formdata.repertoryCount)"
        >{{ $t('part.components.partStock.text2') }}</el-tag>
      </el-tooltip>
    </el-form-item>
    <el-form-item :label="`${$t('part.field11')}:`" prop="number">
       <el-input v-model="form.number" type="number"  step="any" :min="0" :max="formdata.repertoryCount"></el-input>
    </el-form-item>
     <el-form-item :label="`${$t('common.base.operationType')}:`">
       <el-input type="text" v-model="form.type" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('product.productType.type.salePrice')}:`">
       <el-input :value="formdata.sparepart && formdata.sparepart.salePrice.toFixed(2)" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('report.serviceUsageCrowdReport.title5')}:`">
       <el-input :value="totalPrice" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.form.type.remark')}:`" prop="remark">
      <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :maxlength="500"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import MathUtil from '@src/util/math';
import { t } from '@src/locales'

export default {
  name: 'part-apply-form',
  inject: ['initData'],
  props: {
    formdata: {
      type: Object,
      default: () => ({})
    },
    sparepartConfig: {
      type: Object,
      default: () => ({})
    },
  },
  data(){
    const _that = this;
    return {
      form: {
        type: '申领',
        content: '',
        remark: '',
        number: 1
      },
      applicantHoldCount: 0,
      numberValidateForm: {
        number: ''
      },
      rules: {
        remark: [
          {required: true, message: t('common.base.tip.inputCommentContent')},
          {max: 500, message: t('part.components.partRemarkForm.text2', {max:500})}
        ],
        number:[
          {
            validator(rule, value, callback) {
              const val = Number(value);
              const count = _that.decimalNumber(val);
              if (value == '' || val < 0) {
                callback(new Error(t('part.tips22')))
              } else if(_that.formdata.repertoryCount < val){
                callback(new Error(t('part.tips23')))
              } else if (count != -1 && count == 0) {
                callback(new Error(t('part.tips23', {num:0})));
              } else if (count != -1 && count != 0) {
                callback(new Error(t('part.tips24', {num1:0, num2:count})))
              } else{
                callback();
              }
            },
            trigger: 'change',
          }
        ]
      }
    }
  },
  computed: {
    // TODO: 支持小数 提示
    minVariation () {
      let initData = this.initData;
      return !initData || !initData.precision ? 1 : (initData.precision == 1 ? 0.1 : 0.01);
    },

    totalPrice () {
      let number = this.form.number || 0;
      let price = this.formdata.sparepart && this.formdata.sparepart.salePrice ? this.$math.format(this.$math.multiply(this.$math.bignumber(this.formdata.sparepart.salePrice), this.$math.bignumber(number))) : 0;
      return Number(price).toFixed(2);
    }
  },
  methods: {
    getProductData(value) {
      if(value) {
        return value.map(i => (i && i.catalogName) || '').join('，') 
      }
    },
    async pack(){
      try {
        let isSucc = await this.$refs.form.validate();
        if(isSucc){
          let number = this.form.number
          if(number < this.minVariation){
            this.$platform.alert(t('part.tips27', {num:this.minVariation}))
            return
          }
          if(this.formdata.repertoryCount < number){
            this.$platform.alert(t('part.tips31'))
            return
          }
          let parms = {
            'sparepartId':this.formdata.sparepart.id,
            'repertoryId':this.formdata.repertory.id,
            'type':'申领',
            'variation':number,
            remark: this.form.remark
          }
          // let repertoryId = {'id':this.formdata.repertory.id}
          // return {
          //   source : 'sparepart',
          //   applyRemark : this.form.content,
          //   parms : parms
          // }
          return parms
        }
      } catch (error) {
        console.log(error)
      }

      return null;
    },
    selectOutType(ele){
      let type = ele.target.value;
      this.type = type;
    },
    getUserHoldPartCount() {
      this.$http.get(`/partV2/approve/user/getIHold/${this.formdata.sparepart.id}`)
        .then(result => {
          this.applicantHoldCount = result.data || 0;
        });
    },
    decimalNumber(num) {
      let initData = this.initData;
      let count = MathUtil.decimalNumber(num);
      let isPartV2 = initData.isSparepart2;

      if(!isPartV2 && count != 0) return 0;
      if(initData.precision >= count) return -1;
      return initData.precision;
    }
  },
  mounted(){
    this.getUserHoldPartCount();
  },
}
</script>

<style lang="scss" scoped>
.el-form-item{
  margin-bottom: 0
}
.el-form-item__error{
  position: relative;
}
.tag-position {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
#outType{
  width: 100%;
  height: 34px;
}
</style>
